<template>
  <el-dialog
    title="分配角色"
    :visible.sync="status"
    width="40%"
    :before-close="handleClose"
  >
    <qf-form
      v-if="status"
      :row="row"
      :width="80"
      :formItem="formItem"
      :formBtns="formBtns"
    ></qf-form>
  </el-dialog>
</template>

<script>
import { getRoleApi } from "@/api/role";
import { putUserAssignApi } from "@/api/user";

export default {
  props: {
    handleTableData: {
      type: Function,
      required: true,
    },
  },
  methods: {
    handleClose(done) {
      done();
    },
  },
  async created() {
    const roles = await getRoleApi();
    this.formItem[2].payload = roles.data.map((item) => {
      return {
        label: item.role_name,
        value: item.role_id,
      };
    });
  },
  data() {
    return {
      status: false,
      row: {},

      // 表单配置
      formItem: [
        // ...
        {
          label: "用户名",
          rules: [],

          field: "username",

          disabled: true,
          placeholder: "请输入用户名",
          icon: "el-icon-user-solid",
          type: "input",
        },
        {
          label: "角色名",
          rules: [],

          field: "role_name",

          disabled: true,
          placeholder: "请输入角色名",
          icon: "el-icon-user-solid",
          type: "input",
        },
        {
          label: "所属角色",
          field: "role_id",
          rules: [
            { required: true, message: "请选择选择角色", trigger: "change" },
          ],

          //   disabled: true,
          placeholder: "请选择选择角色",
          type: "select",
          payload: [
            // { label: "你大爷名字", value: "你大爷名字" },
            // { label: "您其中唯一讲师的名字", value: "您其中唯一讲师的名字" },
            // { label: "你初念的名字", value: "你初念的名字" },
          ],
        },
        // ...
      ],
      // 表单按钮组
      formBtns: [
        {
          content: "更新",
          type: "primary",
          click: async (formData) => {
            console.log("表单数据", formData);
            const res = await putUserAssignApi(formData);
            if (res.meta.state === 200) {
              this.$message.success(res.meta.msg);
              this.status = false;
              this.handleTableData();
            } else {
              this.$message.error(res.meta.msg);
            }
          },
        },
        {
          content: "重置",
          type: "",
        },
      ],
    };
    // ....
  },
};
</script>
